<template>
    <div>
        <t-header></t-header>
        <div class="w">
            <div class="song-img">
                <img v-lazy="songImgUrl" v-if="songImgUrl != ''">
                <div class="description">
                    <span>歌单介绍</span>
                    <span :title="songDescription" class="description-info">{{songDescription == null ? '该歌单暂无描述信息' : songDescription}}</span>
                </div>
            </div>
            <div class="song-list">
                <span class="song-name">{{songName}}</span>
                <div class="user-info">
                    <img v-lazy="userInfo.avatarUrl">
                    <span class="user-name">{{userInfo.nickname}}</span>
                    <span class="publish-time">{{publishTime | timer}}</span>
                </div>
                <div class="tags">
                    <router-link
                    :key="index"
                    v-for="(item, index) in songTags"
                    to="/home">#{{item}}</router-link>
                </div>

                <!-- 歌曲列表 -->
                <div class="item-wrap">
                    <div class="item-title">
                        <span class="number">{{songInfo.length}}首</span>
                        <span class="song">歌曲</span>
                        <span class="singer">歌手</span>
                        <span class="album">专辑</span>
                        <span class="song-timer">时长</span>
                    </div>
                    <div class="item-list" ref="list">
                        <div
                        :key="index"
                        @mouseenter="showStyle(index)"
                        @mouseleave="clearStyle(index)"
                        :class="(index + 1) % 2 == 1 ? 'song-list-style' : ''"
                        v-for="(item, index) in songInfo"
                        class="item">
                            <div @click="getSongUrl(item, index)" class="play iconfont">{{currentIndexSong == index ? '&#xe668;' : '&#xe682;'}}</div>
                            <div class="number">{{index | number}}</div>
                            <div class="song">{{item.name}}</div>
                            <div class="singer">{{item.ar[0].name}}</div>
                            <div class="album">{{item.al.name}}</div>
                            <div class="song-timer">{{item.dt | songTimer}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        

        <t-footer
        ref="footer"
        :currentSongUrl="currentSongUrl"
        @isPlay="isPlay($event)"
        ></t-footer>
    </div>
</template>

<script>
import Header from '../components/Header';
import Footer from '../components/Footer'; 
export default {
    components: {
        't-header': Header,
        't-footer': Footer
    },
    data() {
        return {
            // 歌曲信息
            songInfo: [],
            // 歌单名字
            songName: '',
            // 歌单封面
            songImgUrl: '',
            // 歌单介绍
            songDescription: '',
            // 发布的用户信息
            userInfo: [],
            // 发布时间
            publishTime: '',
            // 歌单标签
            songTags: [],
            // 当前播放的索引值
            currentIndexSong: 99999,
            // 当前歌曲的URL
            currentSongUrl: ''
        }
    },
    created () {
        if (this.$store.state.currentID == this.$route.params.id) {
            this.currentIndexSong = this.$store.state.currentPlayIndex;
        }
    },
    mounted() {
        this.getSongInfoList(this.$route.params.id);
    },
    methods: {
        // 获取歌单详情数据
        async getSongInfoList(id) {
            let { data: res } = await this.$http.get('/playlist/detail', { params: { id } });
            this.songInfo = res.playlist.tracks.slice(0, 100);
            this.songName = res.playlist.name;
            this.songImgUrl = res.playlist.coverImgUrl;
            this.songDescription = res.playlist.description;
            this.userInfo = res.playlist.creator;
            this.publishTime = res.playlist.createTime;
            this.songTags = res.playlist.tags;
        },
        // 鼠标经过显示背景颜色
        showStyle(index) {
            this.$refs.list.children[index].className = 'item song-list-move-style';
        },
        // 鼠标离开清除背景颜色
        clearStyle(index) {
            if ((index + 1) % 2 == 1) {
                this.$refs.list.children[index].className = 'item song-list-style';
            } else {
                this.$refs.list.children[index].className = 'item';
            }
        },
        // 获取歌曲的url
        async getSongUrl(item, index) {
            this.currentIndexSong = index;
            let { data: res } = await this.$http.get('/song/url', { params: {id: item.id, br: 128000} });
            if (res.data[0].url == null) {
                this.$message.error('当前歌曲暂无版权~~');
                return false;
            }
            // url
            this.currentSongUrl = res.data[0].url;
            this.$store.commit('setCurrentSongUrl', this.currentSongUrl);
            this.$store.commit('setCurrentSongInfo', item);

            // 触发自动播放
            this.$nextTick(() => {
                this.$store.commit('setCurrentPlayIndex', index);
                this.$refs.footer.playSong(index, item);
                
            })
        },
        // 判断当前是暂停还是播放
        isPlay(params) {
            this.$store.commit('setCurrentPlayIndex', params.index);
            if (this.$route.params.id) {
                this.$store.commit('setCurrentID', this.$route.params.id);
            }
            if (params.flag) {
                this.currentIndexSong = params.index;
                this.$message.success('正在播放歌曲');
            } else {
                this.currentIndexSong = 99999;
                this.$message.info('歌曲暂停播放');
            }
            
        }
        
    },
    filters: {
        // 时间过滤器
        timer(data) {
            let times = new Date(data);
            let year = times.getFullYear();
            let mouth = times.getMonth() + 1;
            let day = times.getDate();
            return year + '年' + mouth + '月' + day + '日';
        },
        // 数量过滤器
        number(data) {
            return data < 9 ? '0' + (data + 1) : data + 1;
        },
        // 时长过滤器
        songTimer(data) {
            let time = new Date(data); 
            return time.toString().split(' ')[4].toString().split('08:')[1];
        }
    }
}
</script>

<style lang="less" scoped>

.song-list-style {
    background-color: #f7f7f7!important;
}
.song-list-move-style {
    background-color: #e8e9ed!important;
}
.song-list {
    position: relative;
    width: 900px;
    padding-top: 50px;
    margin-left: 300px;
    .song-name {
        color: #4a4a4a;
        font-weight: 700;
        font-size: 20px;
    }
    .user-info {
        margin-top: 20px;
        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 12px;
        }
        .user-name {
            color: #4a4a4a;
        }
        .publish-time {
            margin-left: 20px;
            color: #808080;
            font-size: 16px;
        }
    }
    .tags {
        margin-top: 12px;
        font-size: 14px;
        a {
            color: #fc221e;
            margin-right: 10px;
        }
    }
    .item-wrap {
        width: 100%;
        margin-top: 30px;
        .item-title {
            display: flex;
            color: #969796;
            padding-bottom: 12px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 20px;
            
        }
    }
    .item-list {
        .item {
            position: relative;
            display: flex;
            height: 46px;
            line-height: 46px;
            color: #4a4a4a;
            transition: all .2s;
            .play {
                position: absolute;
                z-index: 99;
                left: 40px;
                cursor: pointer;
            }
        }
    }
    .number,
    .song,
    .singer,
    .album,
    .song-timer {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .number {
        flex: 1;
    }
    .song {
        flex: 4;
    }
    .singer {
        flex: 3;
        cursor: pointer;
    }
    .album {
        flex: 2;
    }
    .song-timer {
        flex: 1;
        text-align: center;
    }
    
}

.song-img {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    img {
        width: 100%;
    }
    .description {
        display: flex;
        flex-direction: column;
        text-align: center;
        .description-info {
            color: #595959;
            font-size: 14px;
            letter-spacing: 2px;
            display:-webkit-box;//对象作为弹性伸缩盒子模型显示 
            -webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式 
            -webkit-line-clamp: 5;//溢出省略的界限
            overflow:hidden;//设置隐藏溢出元素'>
            text-overflow: ellipsis;
        }
        span:nth-child(1) {
            color: #585858;
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 6px;
        }
    }
}
</style>